<style>
    .elong-main {
        width: 1006px;
        height: 260px;
        margin: 50px auto;
        overflow: hidden;
    }
    
    .elong-main li {
        float: left;
        position: relative;
        width: 144px;
        height: 260px;
    }
    
    .elong-main ul {
        width: 1050px;
    }
    
    .elong-main .pic {
        width: 100%;
        height: 100%;
    }
    
    .elong-main .masker {
        width: 100%;
        position: absolute;
        height: 100%;
        left: 0;
        top: 0;
        background: rgba(0, 0, 0, .5);
    }
    
    .elong-main ul>li>a>div:nth-child(2) {
        background-position-x: center;
    }
    
    .elong-main ul>li:nth-child(1)>a>div:nth-child(2) {
        background-image: url('/img/elong/1.jpg');
    }
    
    .elong-main ul>li:nth-child(2)>a>div:nth-child(2) {
        background-image: url('/img/elong/2.jpg');
    }
    
    .elong-main ul>li:nth-child(3)>a>div:nth-child(2) {
        background-image: url('/img/elong/3.jpg');
    }
    
    .elong-main ul>li:nth-child(4)>a>div:nth-child(2) {
        background-image: url('/img/elong/4.jpg');
    }
    
    .elong-main ul>li:nth-child(5)>a>div:nth-child(2) {
        background-image: url('/img/elong/5.jpg');
    }
    
    .elong-main ul>li:nth-child(6)>a>div:nth-child(2) {
        background-image: url('/img/elong/6.jpg');
    }
    
    .elong-main ul>li:nth-child(7)>a>div:nth-child(2) {
        background-image: url('/img/elong/7.jpg');
    }
    
    .elong-main h2 {
        color: #fff;
        font-weight: normal;
        width: 27px;
        position: absolute;
        left: 50%;
        height: 50%;
        transform: translate(-50%, 50%);
    }
</style>

<div class="elong-main">
    <ul class="accordion">
        <li>
            <a href="javascript:;">
                <div class="masker">
                    <h2>
                        园林酒店
                    </h2>
                </div>
                <div class="pic"></div>
            </a>
        </li>
        <li>
            <a href="javascript:;">
                <div class="masker">
                    <h2>
                        情侣酒店
                    </h2>
                </div>
                <div class="pic"></div>
            </a>
        </li>
        <li>
            <a href="javascript:;">
                <div class="masker">
                    <h2>
                        设计师酒店
                    </h2>
                </div>
                <div class="pic"></div>
            </a>
        </li>
        <li>
            <a href="javascript:;">
                <div class="masker">
                    <h2>
                        青年旅馆
                    </h2>
                </div>
                <div class="pic"></div>
            </a>
        </li>
        <li>
            <a href="javascript:;">
                <div class="masker">
                    <h2>
                        特色客栈
                    </h2>
                </div>
                <div class="pic"></div>
            </a>
        </li>
        <li>
            <a href="javascript:;">
                <div class="masker">
                    <h2>
                        海岛酒店
                    </h2>
                </div>
                <div class="pic"></div>
            </a>
        </li>
        <li>
            <a href="javascript:;">
                <div class="masker">
                    <h2>温泉酒店</h2>
                </div>
                <div class="pic"></div>
            </a>
        </li>
    </ul>
</div>

<script>
    $('.elong-main').find('ul').find('li').on('mouseenter', function() {
        let $this = $(this)
        $this
            .find('.masker')
            .hide()
            .end()
            .css('borderRight', '1px solid #fff')
            .stop()
            .animate({
                'width': 400,
            }, 300)
            .siblings('li')
            .stop()
            .animate({
                'width': 101
            }, 300)
    }).on('mouseleave', function() {
        let $this = $(this)
        $this.css('border', 'none').add($this.siblings('li'))
            .stop()
            .animate({
                'width': 144
            }, 300)
            .find('.masker')
            .show()

    })
</script>